<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas 画图</title>
    <style>
        body {
            text-align: center;
        }

        canvas {
            background: #ddd;
        }
    </style>
</head>
<body>
<canvas id="app" width="500" height="500"></canvas>
<script>
    let ctx = app.getContext("2d");
    // 1. 创建图片对象
    let p3 = new Image();
    // 2. 加载图片
    p3.src = "../src/paused.jpg";
    // 3. 为图片对象绑定事件 onload
    p3.onload = function () {
        // console.log(p3.width);
        // 4. 绘制图片
        let w = p3.width;
        let h = p3.height;
        ctx.drawImage(p3, 0, 0);
        // 左上角 右 左下 右下 居中 200*100
        ctx.drawImage(p3, 500 - w, 0);
        ctx.drawImage(p3, 0, 500 - h);
    }

</script>
</body>
</html>